/**
 * set innerHTML of DOM element, a patch for IE
 */
var Element= {
	setInnerHTML: function(element, html)
	{
		html = '<span style="display: none;">hack IE for no visible content parsing</span>' + html;
		var scriptElements = html.match(/<script[^>]*>([\s\S]*)<\/script>/ig);
		html = html.replace(/<script[^>]*>[\s\S]*<\/script>/ig, '');
		element.innerHTML = html;
		if (scriptElements)
		{
			for (var i = 0; i < scriptElements.length; i ++)
			{
				var script = document.createElement('script');
				script.text = scriptElements[i].replace(/<script[^>]*>/, '');
				script.text = script.text.replace(/<\/script>/, '');
				document.getElementsByTagName('head')[0].appendChild(script);
			}
		}
	}
};

/**
 * DataGrid class
 */
var DataGrid = function(rowsContainerId, templateRowId)
{
	this.rowsContainerId	= rowsContainerId;
	
	this._getRowElements = function()
	{
		var rowElements = [];
		var rowNodeName;
		for (var i = 0; i < this.rowsContainer.childNodes.length; i ++)
		{
			if ('#text' != this.rowsContainer.childNodes[i].nodeName)
			{
				rowNodeName = this.rowsContainer.childNodes[i].nodeName;
				break;
			}
		}
		if (rowNodeName)
		{
			var nodes = this.rowsContainer.getElementsByTagName(rowNodeName);
			for (i = 0; i < nodes.length; i ++)
			{
				if (-1 != nodes[i].id.indexOf('row-'))
				{
					rowElements.push(nodes[i]);
				}
			}
		}
		else
		{
			alert('rows container is empty.');
		}
		return rowElements;
	};
	
	this._getRowById = function(rowId)
	{
		var rowElements = this._getRowElements();
		var loopTimes = rowElements.length;
		for (var i = 1; i < loopTimes; i ++)
		{
			if (rowElements[i].id == 'row-'+rowId)
			{
				return rowElements[i];
			}
		}
	};
	
	this._init = function()
	{
		if (this.rowsContainerId)
		{
			this.rowsContainer = document.getElementById(this.rowsContainerId);
			if (this.rowsContainer)
			{
				var rowElements = this._getRowElements();
				if (0 < rowElements.length)
				{
					this.templateRow = rowElements[0];
				}
				else
				{
					alert("template row can not be found.");
				}
			}
			else
			{
				alert("rows container can not be found.");
			}
		}
		else
		{
			alert("please specify the rows container ID.");
		}
	};
	
	this._setRowValue = function(rowElement, rowData)
	{
		var html = rowElement.innerHTML;
		for (var property in rowData)
		{
			html = html.replace(new RegExp('--placeholder:'+property+'--', 'ig'), rowData[property]);
			html = html.replace(new RegExp('<!--'+property+'-->[\\s\\S]*<!--'+property+'-->', 'ig'), '<!--'+property+'-->'+rowData[property]+'<!--'+property+'-->');
		}
		Element.setInnerHTML(rowElement, html);
	};
	
	this.addRow = function(rowData, nextRowId)
	{
		var newRow = document.createElement('div');
		var nextRow = this._getRowById(nextRowId);
		Element.setInnerHTML(newRow, this.templateRow.innerHTML);
		newRow.id = 'row-'+rowData.id;
		newRow.className = this.templateRow.className;
		var rowElements = this._getRowElements();
		if (1 < rowElements.length && nextRow)
		{
			this.rowsContainer.insertBefore(newRow, nextRow);			
		}
		else
		{
			this.rowsContainer.appendChild(newRow);
		}
		newRow = this._setRowValue(newRow, rowData);
	};
	
	this.delRow = function(rowId)
	{
		var rowElement = this._getRowById(rowId);
		this.rowsContainer.removeChild(rowElement);
	};
	
	this.setRow = function(rowId, rowData)
	{
		var rowElement = this._getRowById(rowId);
		this._setRowValue(rowElement, rowData);
	};
	
	this._init();
};